<template>
  <view class="container">


    <scroll-view scroll-y=true style="height: 100vh;"
                 scroll-with-animation="true">
      <!-- 商品 -->
      <view class="commodity" ref="commodity">
        <swiper class="swiper" indicator-color="#ffffff" indicator-active-color="#2E7D32" circular
                indicator-dots="true">
          <!--          <swiper-item v-if="data.goodsdetali.video">-->
          <!--            <video style="width: 100%;height: 100%;" :src="data.goodsdetali.video" controls></video>-->
          <!--          </swiper-item>-->
          <swiper-item v-for="(item,index) in shopInfoData.img" :key="index">
            <image :src="item" mode="aspectFill"></image>
          </swiper-item>
        </swiper>
      </view>
      <view class="msg">
        <view class="text_5_32">{{ shopInfoData.name }}</view>
        <view class="text_4_28 rl">商户让利：{{shopInfoData.discount
          }}%</view>
        <up-divider text=""></up-divider>
        <view class="it l_f_r l_al_c"  >
          <image :src="shopInfoData.shop_head" class="img"></image>
          <view class="flex_1 l_f_c ">
            <view>
              <view class="text_4_28 text_c_2d">{{shopInfoData.address}}</view>
              <view class="text_4_28 text_c_2d ">
                {{shopInfoData.province+shopInfoData.city+shopInfoData.area}}
              </view>
            </view>


            <view  class="l_f_r l_al_c ">
              <text  class="text_4_24 text_c_2d">距离{{(optionRef.distance)||0}}km</text>
            </view>

          </view>
          <view @click="open()" class="l_f_c_c_c">
            <image src="https://pili-vod.guanxikeji.com/fubao/img/1755573883903.png" class="openImg"></image>
            <view class="text_c_2d text_4_24">到这去</view>
          </view>
        </view>
        <up-divider text=""></up-divider>

      </view>


      <!-- 详情 -->
      <view class="details shopDetails box">
        <view class=" l_f_r_c_c">
          <text class="text_5_28 title">
            商户详情

          </text>
        </view>
        <view class="details" v-html="shopInfoData.details">
        </view>
      </view>
      <!-- 别删 -->
      <view class="" style="height:50px;"></view>
    </scroll-view>
    <!-- 底部 -->
    <view class="goodsnav l_f_r_c_c">
      <image class="goHome" src="https://pili-vod.guanxikeji.com/fubao/img/1755589681734.png" @click="$goURl('/pages/index/index')"></image>
      <view class="l_f_r_c_c text_4_28 text_w"   @click="gopay()">去消费</view>

    </view>
  </view>
</template>
<script setup>
import {getCurrentInstance, ref} from "vue";
import {onLoad, onShow} from "@dcloudio/uni-app";

const swiperList = ref(["https://123.zhongtakeji.com/undefined/home/1755238399632.png"])
const scrollTop = ref(0)
const {
  proxy
} = getCurrentInstance();
const optionRef = ref({})
onLoad((option) => {
  optionRef.value = option
  shopInfo()

})
onShow(() => {
  console.log('页面onShow')
})
function gopay(){
  proxy.$goURl('/subPackages/business/pay?id='+shopInfoData.value.ID+'&discount='+5+'&notes='+shopInfoData.value.name+'&money='+0)
}
function jl(num){
  let nums=(Number(num)/1000).toFixed(3)
  let numss=nums.toString().split('.')
  let number=Number(numss[1])
  if(number>(Number(number.toString()[0])*100)&number!=0){

    return numss[0]+'.'+(Number(number.toString()[0])+1)
  }else{
    return numss[0]+'.'+Number(number.toString()[0])
  }
}

const shopInfoData = ref({})

function shopInfo() {
  proxy.$request({
    url: `api/shopInfo/?id=${optionRef.value.id}`,
    method: 'get',
    success(res) {
      console.log(res, "rres")
      shopInfoData.value = res.data
      try {
        shopInfoData.value.img = evalPro(shopInfoData.value.img) || [shopInfoData.value.shop_head]
      } catch (e) {
        //TODO handle the exception
        shopInfoData.value.img = [shopInfoData.value.shop_head]

      }

    }
  })
}
function open() {
  let item = shopInfoData.value
  console.log(item.latitude, item.longitude)
  uni.openLocation({
    latitude: item.longitude, // 目标纬度
    longitude: item.latitude, // 目标经度
    name: item.address,
    address: item.province + item.city + item.area,
    success: function() {
      console.log('打开地图导航成功');
    },
    fail: function(err) {
      console.log('打开地图导航失败', err);
    }
  })
}
</script>

<style lang="scss" scoped>
.container {
  // padding-bottom: 60px;
}

.commodity {
  width: 100%;
  // height: 700rpx;

  .swiper {
    width: 100%;
    height: 750rpx;
  }

  image {
    width: 100%;
    height: 750rpx;

  }

}

.box {
  margin-top: 20rpx;
  width: calc(100% - 40rpx);
  // margin-left: 20rpx;
  border-radius: 20rpx;
  background-color: #fff;
  padding: 20rpx;
  // height: 600px;

  .title {
    // text-align: center;
    font-weight: bold;
    font-size: 32rpx;
    color: #333;
    display: flex;
    justify-content: space-between;

    text {
      font-size: 24rpx;
      color: #999;
      font-weight: 500;
    }
  }


  .details {
    margin-top: 20rpx;

    ::v-deep img {
      max-width: 100% !important;
    }

    ::v-deep image {
      max-width: 100% !important;
    }

    ::v-deep video {
      max-width: 100% !important;
    }
  }

}

.goodsnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  box-shadow: 0 -2px 10rpx 0 rgba(0, 0, 0, 0.1);
  padding: 20rpx;
  .goHome{
    width: 48rpx;
    height: 48rpx;
    margin-right: 40rpx;
  }
  .l_f_r_c_c{
    width: 588rpx;
    height: 76rpx;
    background: #2E7D32;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }
}


.shopDetails {
  margin-top: 0;
  padding-top: 0;

  .title {

  }
}

// #ifdef MP-WEIXIN
::v-deep .uni-popup__wrapper {
  position: relative;
  bottom: -33px;
}

// #endif
.msg{
  background-color: #fff;
  padding: 20rpx;
  .rl{
    color: #2E7D32;
    margin-top: 10rpx;
    margin-bottom: 10rpx;
  }
  .it{
    margin: 0rpx auto;
    padding: 0rpx 0rpx;
    box-sizing: border-box;
    //width: 690rpx;
    //height: 222rpx;
    background: #FFFFFF;

    .img{
      width: 168rpx;
      height: 168rpx;
      margin-right: 16rpx;
    }
    .flex_1{
      height: 168rpx;
      justify-content: space-between;
      .title{
        height: 80rpx;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;

      }
      .rate{
        gap: 10rpx;
        .rate_text{
          gap: 10rpx;
        }
      }
      .icon{
        margin-right: 4rpx;
      }
    }

  }
  .openImg{
    width: 72rpx;
    height: 60rpx;
    margin-bottom: 5rpx;
  }
}
:deep(.u-divider){
  margin:20rpx 0;
}
</style>
